<template>
<el-dialog :title="!dataForm.id ? '新增图书' : '修改图书'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
        <el-form-item label="图书名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="图书名称"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="type">
            <el-input v-model="dataForm.type" placeholder="分类"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="press">
            <el-input v-model="dataForm.press" placeholder="出版社"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
            <el-input v-model="dataForm.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="出版时间" prop="publishDate">
            <el-date-picker v-model="dataForm.publishDate" type="month" placeholder="选择年月" format="yyyy 年 MM 月" value-format="yyyy-MM-dd hh:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="语言" prop="language">
            <el-input v-model="dataForm.language" placeholder="语言"></el-input>
        </el-form-item>
        <el-form-item label="国际标准书号" prop="isbn">
            <el-input v-model="dataForm.isbn" placeholder="国际标准书号"></el-input>
        </el-form-item>
        <el-form-item label="封面">
            <div>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" @on-exceed="fileLimit" :on-change="changeUpload">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
            </div>
        </el-form-item>
        <el-form-item label="描述" prop="info">
            <el-input v-model="dataForm.info" placeholder="描述"></el-input>
        </el-form-item>
        <el-form-item label="定价" prop="price">
            <el-input v-model="dataForm.price" type="number" placeholder="定价"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="note">
            <el-input v-model="dataForm.note" placeholder="备注"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    data() {
        return {
            imgFile: null,
            dialogImageUrl: "",
            dialogVisible: false,
            disabled: false,
            visible: false,
            publishDate: {
                year: "",
                month: ""
            },
            dataForm: {
                id: 0,
                name: "",
                type: "",
                press: "",
                author: "",
                publishDate: "",
                language: "",
                isbn: "",
                img: "",
                info: "",
                price: 0.0,
                note: ""
            },
            dataRule: {
                name: [{
                    required: true,
                    message: "图书名称不能为空",
                    trigger: "blur"
                }],
                type: [{
                    required: true,
                    message: "分类不能为空",
                    trigger: "blur"
                }],
                press: [{
                    required: true,
                    message: "出版社不能为空",
                    trigger: "blur"
                }],
                author: [{
                    required: true,
                    message: "作者不能为空",
                    trigger: "blur"
                }],
                publishDate: [{
                    required: true,
                    message: "出版时间不能为空",
                    trigger: "blur"
                }],
                language: [{
                    required: true,
                    message: "语言不能为空",
                    trigger: "blur"
                }],
                isbn: [{
                    required: true,
                    message: "国际标准书号不能为空",
                    trigger: "blur"
                }],
                price: [{
                    required: true,
                    message: "定价不能为空",
                    trigger: "blur"
                }]
            }
        };
    },
    methods: {
        changeUpload(file, fileList) {
            this.imgFile = file;
        },
        fileLimit() {
            console.log();
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },

        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.$http({
                        url: this.$http.adornUrl(
                            `/generator/tbook/info/${this.dataForm.id}`
                        ),
                        method: "get",
                        params: this.$http.adornParams()
                    }).then(({
                        data
                    }) => {
                        if (data && data.code === 0) {
                            this.dataForm.name = data.tBook.name;
                            this.dataForm.type = data.tBook.type;
                            this.dataForm.press = data.tBook.press;
                            this.dataForm.author = data.tBook.author;
                            this.dataForm.publishDate = data.tBook.publishDate;
                            this.dataForm.language = data.tBook.language;
                            this.dataForm.isbn = data.tBook.isbn;
                            this.dataForm.img = data.tBook.img;
                            this.dataForm.info = data.tBook.info;
                            this.dataForm.price = data.tBook.price;
                            this.dataForm.note = data.tBook.note;
                        }
                    });
                }
            });
        },
        // 表单提交
        dataFormSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.$http({
                        url: this.$http.adornUrl(
                            `/generator/tbook/${!this.dataForm.id ? "save" : "update"}`
                        ),
                        method: "post",
                        data: this.$http.adornData({
                            id: this.dataForm.id || undefined,
                            name: this.dataForm.name,
                            type: this.dataForm.type,
                            press: this.dataForm.press,
                            author: this.dataForm.author,
                            publishDate: this.dataForm.publishDate,
                            language: this.dataForm.language,
                            isbn: this.dataForm.isbn,
                            info: this.dataForm.info,
                            price: this.dataForm.price,
                            note: this.dataForm.note
                        })
                    }).then(({
                        data
                    }) => {
                        if (data && data.code === 0) {
                            this.dataForm.id = data.data;
                            if (this.imgFile) {
                                let file = new FormData();
                                file.append("file", this.imgFile.raw);
                                //上传图片
                                this.$http({
                                    url: this.$http.adornUrl(
                                        `/generator/tbook/upload/` + this.dataForm.id
                                    ),
                                    method: "post",
                                    data: file,
                                    contentType: "multipart/form-data"
                                }).then(({
                                    data
                                }) => {
                                    if (data && data.code === 0) {} else {
                                        this.$message.error(data.msg);
                                    }
                                });
                            }
                            this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                }
                            });
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                }
            });
        }
    }
};
</script>
